<template>
  <div class="console-container">
    <a-layout>
      <a-layout-sider width="200" class="sider">
        <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="inline"
          :style="{ height: '100%', borderRight: 0 }"
          @select="onMenuSelect"
        >
          <a-menu-item key="api-management">
            <ApiOutlined />
            <span>接口管理</span>
          </a-menu-item>
          <a-menu-item key="sandbox-config">
            <SettingOutlined />
            <span>沙箱配置</span>
          </a-menu-item>
          <a-menu-item key="debug-environment">
            <BugOutlined />
            <span>调试环境</span>
          </a-menu-item>
          <a-menu-item key="api-log">
            <HistoryOutlined />
            <span>接口调用日志</span>
          </a-menu-item>
          <a-menu-item key="api-document">
            <FileOutlined />
            <span>API文档</span>
          </a-menu-item>
          <a-menu-item key="mock-data">
            <DatabaseOutlined />
            <span>Mock数据</span>
          </a-menu-item>
          <a-menu-item key="monitor-alert">
            <AlertOutlined />
            <span>监控告警</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout-content class="content">
        <div v-if="currentView === 'api-management'">
          <ApiManagement />
        </div>
        <div v-else-if="currentView === 'sandbox-config'">
          <SandboxConfig />
        </div>
        <div v-else-if="currentView === 'debug-environment'">
          <DebugEnvironment />
        </div>
        <div v-else-if="currentView === 'api-log'">
          <ApiLog />
        </div>
        <div v-else-if="currentView === 'api-document'">
          <ApiDocument />
        </div>
        <div v-else-if="currentView === 'mock-data'">
          <MockData />
        </div>
        <div v-else-if="currentView === 'monitor-alert'">
          <MonitorAlert />
        </div>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import { ApiOutlined, SettingOutlined, BugOutlined, HistoryOutlined, FileOutlined, DatabaseOutlined, AlertOutlined } from '@ant-design/icons-vue';
import ApiManagement from './api-management.vue';
import SandboxConfig from './sandbox-config.vue';
import DebugEnvironment from './debug-environment.vue';
import ApiLog from './api-log.vue';
import ApiDocument from './api-document.vue';
import MockData from './mock-data.vue';
import MonitorAlert from './monitor-alert.vue';

export default {
  name: 'Console',
  components: {
    ApiOutlined,
    SettingOutlined,
    BugOutlined,
    HistoryOutlined,
    FileOutlined,
    DatabaseOutlined,
    AlertOutlined,
    ApiManagement,
    SandboxConfig,
    DebugEnvironment,
    ApiLog,
    ApiDocument,
    MockData,
    MonitorAlert
  },
  data() {
    return {
      selectedKeys: ['api-management'],
      currentView: 'api-management'
    };
  },
  methods: {
    onMenuSelect({ key }) {
      this.currentView = key;
    }
  }
};
</script>

<style scoped>
.console-container {
  padding: 20px;
  background: #fff;
  height: 100%;
}

.sider {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
}

.content {
  padding: 0 24px;
  overflow: auto;
}

.ant-layout-has-sider {
  height: 100%;
}

.ant-layout-sider {
  height: 100%;
}
</style>